<template>
  <basic-container>
    <h3>用户管理</h3>
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @on-load="getList"
      @refresh-change="refreshChange"
      v-model:page="page"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
    </avue-crud>
  </basic-container>
</template>
<script>
import { update, add, del, select } from "@/api/users.js";

export default {
  data() {
    return {
      page: {
        pagerCount: 6,
        pageSize: 10,
        total: 0,
      },

      option: {
        lazy: true,
        rowKey: "id",
        searchMenuSpan: 8,
        searchIndex: 3,
        searchIcon: true,
        column: [
          {
            label: "id",
            prop: "id",
            display: false,
          },
          {
            label: "用户名",
            prop: "username",
            search: false,
          },
          {
            label: "昵称",
            prop: "nickname",
            search: true,
            // searchInputWidth: 30,
            searchSpan: 5,
          },
          {
            label: "密码",
            prop: "password",
            type: "password",
            hide: true,
          },
          {
            label: "手机",
            prop: "mobile",
            search: true,
            searchSpan: 5,
          },
          {
            label: "登录时间",
            prop: "last_time",
            display: false,  
            type: "datetime", 
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            searchRange: true,
            searchSpan: 5,
            search: true,
          },
          {
            label: "登录ip",
            prop: "last_ip",
            display: false,
          },
        //   {
        //     label: "注册时间",
        //     prop: "join_time",
        //     display: false,
        //   },
        //   {
        //     label: "注册ip",
        //     prop: "join_ip",
        //     display: false,
        //   },
        ],
      },
      data: [],
    };
  },

  methods: {
    refreshChange() {
      this.getList();
    },

    getList(params) {
      this.loading = true;

      let par = { page: this.page.currentPage, limit: this.page.pageSize };
      if (params) {
        par = Object.assign(par, params);
      }
      select(par).then((res) => {
        this.loading = false;
        const data = res.data.data;
        this.data = data;
        this.page.total = res.data.count;
      });
    },
    rowDel(row, index, done) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });

            this.getList();
            done(row);
          });
        })
        .catch(() => {});
    },
    //新增
    rowSave(row, done) {
      row.parentId = this.parentId;
      this.parentId = undefined;
      if (row.id) {
        update(row).then((res) => {
          done();
          this.getList();
        });
      } else {
        add(row).then((res) => {
          done();
          this.getList();
        });
      }
    },
    //编辑
    rowUpdate(row, index, done) {
      update(row).then((res) => {
        done(row);
        this.getList();
      });
    },

    // sizeChange(val) {
    //   this.page.currentPage = 1;
    //   this.page.pageSize = val;
    //   this.getList();
    //   console.log(2)
    // //   this.$message.success("行数" + val);
    // },
    // currentChange(val) {
    //   this.page.currentPage = val;
    //   this.getList();
    //   console.log(1)
    // //   this.$message.success("页码" + val);
    // },

    resetChange(item) {
      this.page.currentPage = 1;
      this.getList();
    },
    searchChange(params, done) {
      this.getList(params);
      done();
    },
  },
};
</script>
